<template>
  <div>
    <MyTable :arr="list">
      <template #header>
        <th>序号</th>
        <th>商品名称</th>
        <th>价格</th>
        <th>标签</th>
        <th>操作</th> 
      </template>
      <template #body='{row,index}'>
        <td>{{ row.id }}</td>
        <td>{{ row.goods_name }}</td>
        <td>{{ row.goods_price }}</td>
        <td class="my-goods-list">
           <input type="text" 
           class="tag-input form-control"
           style="width: 100px;"
           v-if="row.inputVisible"
           v-model="row.inputValue"
           @keydown.enter="addFn(row)"
           @blur="row.inputVisible = false"
           @keydown.esc="row.inputValue = ''"
           v-focus
           >
           <button  
           style="display: block;" 
           class="btn btn-primary btn-sm add-tag"
           v-else
           @click="row.inputVisible = true"
           >+Tag</button>
           <span class="badge badge-warning" 
           v-for="(item,index) in row.tags" 
           :key="index"
           >
           {{item}}
           </span>
         </td>
        <td>
            <button class="btn btn-danger btn-sm" @click="btn(index)">删除</button>
        </td>
      </template>
    </MyTable>
  </div>
</template>

<script>
import MyTable from "./MyTable"
// 目标: 循环商品列表表格
// 1. 封装MyTable.vue 整体表格组件-一套标签和样式
// 2. axios请求数据
// 3. 传入MyTable组件里循环tr显示数据

// 目标: 展示tags标签
// 1. tags数组 - 某个td循环span使用文字
// 2. span设置bs的样式

// 目标: 删除数据
// 1. 删除按钮 - 点击事件
// 2. 作用域插槽把索引值关联出来了
// scope身上就有row和index
// 3. 删除中使用scope.index的索引值
// 4. 删除事件里删除数组里对应索引值的数据
export default {
  components: {
    MyTable,
  },
  // 自动获取焦点
  directives:{
    focus:{
      inserted(el){
        el.focus()
      }
    }
  },
  data() {
    return {
      list: [] // 所有数据
    };
  },
  created() {
    this.$axios({
      url: "/api/goods",
    }).then((res) => {
      this.list = res.data.data
      console.log(this.list)
      
    }).catch((err) => {
      console.log(err)  
    })
  },
  methods:{
    btn(index){
      this.list.splice(index, 1)
    },
     addFn(row){
        console.log(row)
        if(row.inputValue.trim().length === 0) return alert('输入不能为空！')
        row.tags.push(row.inputValue) 
        row.inputValue = ''
  }
  },
};
</script>
  <style lang="less" scoped>
   .my-goods-list {
     .badge {
       margin-right: 5px;
     }
   }
</style>